<template>
  <view class="" style="background-color: white;">
    <uni-popup class="pop" ref="popupRef" borderRadius='10px 10px 0px 0px' backgroundColor='white' type="bottom" :animation="true">
      <swiper style="height: 25vh;" class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="(item, index) in guideArray" :key="index">
          <view class="isbackBox">
           <image class="backimage" :src="imageUrl + item.leader_image" mode="aspectFill"></image>
            <view class="contentBox">
              <view class="title">领队介绍</view>
              <text class="description">{{ item.leader_desc }}</text>
              <view class="info">
                <view class="info-item">领队名字：{{ item.leader_name }}</view>
                <view class="info-item">领队职责：{{ item.leader_title }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </uni-popup>
  </view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import { imageUrl } from '../../../../config/request/request';
	import {
		Getguide
	} from '../../../../config/API/Customize';
	const indicatorDots = ref(true)
	const autoplay = ref(false)
	const guideArray = ref()
	onMounted(async () => {
		const data = await Getguide()
		
		guideArray.value = data.data
		console.log('领队', guideArray.value)
	})
	const popupRef = ref(null);
	const phoneNumber = ref()
	// 暴露方法给父组件
	const exposeMethods = {
		showPopup: () => {
			popupRef.value.open();
		},
		closePopup: () => {
			popupRef.value.close();
		}
	};

	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
.isbackBox {
	margin-left: 10rpx;
	margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.backimage {
  width: 100%;
  height: 240rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.contentBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.title {
  font-weight: 600;
  font-size: 32rpx;
  color: rgba(0, 19, 76, 0.9);
  line-height: 44rpx;
  margin-bottom: 10rpx;
}

.description {
  font-weight: 400;
  font-size: 28rpx;
  color: rgba(0, 19, 76, 0.8);
  line-height: 40rpx;
  margin-bottom: 20rpx;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.info-item {
  font-weight: 500;
  font-size: 28rpx;
  color: rgba(0, 19, 76, 0.8);
  line-height: 40rpx;
  margin-bottom: 10rpx;
}

.pop-content {
  background: #FFFFFF;
  width: 100vw;
  display: flex;
  border-radius: 20px 20px 0 0;
  justify-content: center;
  box-sizing: border-box;
}

.pop-content text {
  font-family: Lantinghei SC, Lantinghei SC;
  font-weight: 600;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 44rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.button_2 {
  width: 110%;
  height: 192rpx;
  display: flex;
  flex-direction: column;
  gap: 104rpx;
  align-items: center;
}

.button_2 text {
  font-family: Lantinghei SC, Lantinghei SC;
  font-weight: 600;
  font-size: 32rpx;
  color: rgba(0, 19, 76, 0.9);
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.button_1 {
  font-weight: 600;
  font-size: 28rpx;
  color: rgba(0, 19, 76, 0.6);
  font-family: Lantinghei SC, Lantinghei SC;
}
</style>